<template>
  <div class="wrap">
    <div id="container">
      <!-- 定义一个表格元素 -->
      <!--<button id="redraw">更换数据源</button>-->
      <section class="detail-header">
        <div class="col-sm-12 console-title">
          <h5 class="">告警规则列表</h5>
          <div class="stayRight ">
            <el-button @click="siteconfList(1)" icon="star-off">刷新</el-button>
            <el-button type="primary" @click="showMonitor()">创建告警规则</el-button>
          </div>
        </div>
      </section>
      <section class="searchBar">
        <div class="form-inline">
          <div class="pull-left">
            <div class="searchIpt">
              <el-input v-model="searchStr" placeholder="请输入规则名称进行搜索"></el-input>
            </div>
            <div class="searchbtn">
              <el-button @click="siteconfList(1)">搜索</el-button>
            </div>
          </div>
        </div>
      </section>
      <section class="tableMain">
        <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="规则名称"> </el-table-column>
          <el-table-column prop="statusName" width="130" :label="listStatus" :filters="[{ text: '全部', value: 0 }, { text: '正常状态', value: 1 }, { text: '告警状态', value: 2 }, { text: '数据不足', value: 3 }, { text: '启用', value: 4 }, { text: '禁用', value: 5 }]" :filter-method="filterTag" filter-placement="bottom-end">
            <template scope="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'danger' : 'gray'" close-transition>{{scope.row.statusName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="监控项" >
            <template scope="scope">{{ scope.row.monitorItemName }}</template>
          </el-table-column>
          <el-table-column label="维度">
            <template scope="scope">
              <span v-if="scope.row.resourceType==='2'"><el-tag style="background-color:#D0AE15;">标签:{{scope.row.resourceName}}</el-tag></span>
              <span v-if="scope.row.resourceType==='3'"><el-tag type="warning">实例:{{scope.row.resourceName}}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column label="告警规则">
            <template :type="scope.row.resourceType === '1' ? 'primary' : 'success'" scope="scope">{{scope.row.ruleText}}</template>
          </el-table-column>
          <el-table-column prop="instanceTypeName" label="产品名称"></el-table-column>
          <el-table-column label="通知对象">
            <template scope="scope">
              <el-button size="small" type="text" @click="showMonitorContactsGroup(scope.$index, dataArr)">{{scope.row.contactsGroupName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template scope="scope">
              <el-button size="small" type="text" @click="showMonitor(scope.$index, dataArr, 'true')">查看</el-button> | 
              <el-button size="small" type="text" @click="showMonitor(scope.$index, dataArr)">修改</el-button> 
              <!-- <el-button size="small" type="text" @click="showAlarm(scope.$index, dataArr)">告警详情</el-button>  -->
              <!-- <el-button size="small" type="text" @click="showMonitor(scope.$index, dataArr)">禁用</el-button> |
              <el-button size="small" type="text" @click="deleteAlarmRUle(scope.$index, dataArr)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageSIzeblock">
          <div class="pullright">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
            </el-pagination>
          </div>
          <div class="pullLeft">
            <el-button size="small" name="button-del" @click="enabledAll()" :disabled="pdisabled">启用</el-button>
            <el-button size="small" name="button-del" @click="disabledAll()" :disabled="pdisabled">禁用</el-button>
            <el-button size="small" name="button-del" @click="delAll()" :disabled="pdisabled">删除</el-button>
          </div>
        </div>
      </section>
      <el-dialog :title="monitorTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false" size="full">
        <div class="scoreContainer tagCategory">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-templetForm">
            <div class="aar-gap">
              <div class="aar-gap-index">1</div>
              <div class="aar-gap-title ng-binding">关联资源</div>
              <div class="aar-gap-line-c">
                <div class="aar-gap-line"></div>
              </div>
            </div>
            <div style="border: 1px solid #f0f0f0;border-radius: 0px;width:50%;margin-left:60px;padding: 20px;position: relative;">
              <el-form-item label="产品" prop="instanceType" class="instanceTypeClass">
                <el-select v-model="ruleForm.instanceType" @change="instanceTypeChange" :disabled="isView  || isEdit">
                  <el-option v-for="item in instanceTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="资源范围" prop="resourceType" class="instanceTypeClass">
                <el-select v-model="ruleForm.resourceType" @change="resourceTypeChange" :disabled="isView || isEdit">
                  <!-- <el-option label="全部资源" value="1"></el-option> -->
                  <el-option label="应用标签" value="2"></el-option>
                  <el-option label="实例" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="ruleForm.resourceType==='2'" label="我的标签" prop="resourceId" class="instanceTypeClass">
                <el-select v-model="ruleForm.resourceId" placeholder="无可用标签" :disabled="isView  || isEdit">
                  <el-option v-for="item in myTagList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="ruleForm.resourceType==='3'" label="实例" prop="resourceId" class="instanceTypeClass">
                <el-select v-model="ruleForm.resourceId" placeholder="无可用实例" :disabled="isView  || isEdit">
                  <el-option v-for="item in instanceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="aar-gap">
              <div class="aar-gap-index">2</div>
              <div class="aar-gap-title ng-binding">设置告警规则</div>
              <div class="aar-gap-line-c">
                <div class="aar-gap-line"></div>
              </div>
            </div>
            <div style="border: 1px solid #f0f0f0;border-radius: 0px;width:50%;margin-left:60px;padding: 20px;position: relative;float:left;">
                <div v-for="(item,index) in ruleForm.ruleList" :key="index">
                  <div class="aar-gap-line-c" v-if="index!=0" style="margin:0 auto;">
                    <div class="aar-gap-line"></div>
                  </div>

                  <el-form-item label="规则名称" :rules="{ required: true, message: '规则名称不能为空', trigger: 'blur' }" :prop="'ruleList.' + index + '.values'">
                    <el-input v-model="item.name" style="width:200px;" :disabled="isView"></el-input>
                    <a class="btn delete-link" @click="deleteRuleData(index)" v-if="index!=0 && !isView"><span>删除</span></a>
                  </el-form-item>
                  <!-- 
                  <el-form-item v-if="ruleForm.instanceType===3" label="业务类型">
                    <el-select v-model="item.business" placeholder="请选择业务类型" style="width:100px;" :disabled="isView">
                      <el-option label="订单" value="订单"></el-option>
                      <el-option label="回单" value="回单"></el-option>
                      <el-option label="登录" value="登录"></el-option>
                      <el-option label="支付" value="支付"></el-option>
                    </el-select>
                  </el-form-item>
                   -->
                  <el-form-item label="规则描述">
                    <el-select v-model="item.monitorItemId" placeholder="请选择监控项" :disabled="isView">
                      <el-option v-for="monitor_item in ruleForm.instanceTypeObj.monitorItemList" :key="monitor_item.id" :label="monitor_item.name" :value="monitor_item.id"></el-option>
                    </el-select>
                    <el-select v-model="item.timeRange" placeholder="请选择时间" style="width:100px;" :disabled="isView">
                      <el-option label="1分钟" value="1"></el-option>
                      <el-option label="2分钟" value="2"></el-option>
                      <el-option label="3分钟" value="3"></el-option>
                    </el-select>
                    <el-select v-model="item.metric" placeholder="请选择指标" style="width:100px;" :disabled="isView">
                      <!-- <el-option label="平均值" value="avg"></el-option> -->
                      <el-option label="存在" value="exist"></el-option>
                      <el-option label="总是" value="always"></el-option>
                      <!-- <el-option label="总和" value="sum"></el-option> -->
                    </el-select>
                    <el-select v-model="item.relation" placeholder="请选择关系" style="width:100px;" :disabled="isView">
                      <el-option label=">" value=">"></el-option>
                      <el-option label=">=" value=">="></el-option>
                      <el-option label="<" value="<"></el-option>
                      <el-option label="<=" value="<="></el-option>
                      <el-option label="=" value="="></el-option>
                    </el-select>
                    <el-form-item :rules="{ required: true, message: '域值不能为空', trigger: 'blur' }" :prop="'ruleList.' + index + '.values'" style="display:inline-block" class="tempClass" >
                      <el-input class="valuesClass" v-model="item.values" placeholder="请输入值域" :disabled="isView" ></el-input>
                    </el-form-item>
                    <span v-if="monitor_item.id===item.monitorItemId" v-for="monitor_item in ruleForm.instanceTypeObj.monitorItemList">{{monitor_item.unit}}</span>
                  </el-form-item>
                </div>
                <div>
                  <div style="height: 40px;line-height: 34px;margin-bottom:15px;" v-if="!isView && !isEdit">
                    <a class="btn btn-link" @click="addRuleData()"><span class="el-icon-plus"></span><span class="ng-binding" >添加告警规则</span></a>
                  </div>
                  <el-form-item label="沉默通道时间">
                    <el-select v-model="ruleForm.channelSilenceTime" :disabled="isView">
                      <el-option label="10分钟" value="10"></el-option>
                      <el-option label="1小时" value="60"></el-option>
                      <el-option label="12小时" value="720"></el-option>
                      <el-option label="24小时" value="1440"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- 
                  <el-form-item label="连续几次超过阈值后告警">
                    <el-select v-model="ruleForm.consecutiveTimes">
                      <el-option label="1" value="1"></el-option>
                      <el-option label="3" value="3"></el-option>
                      <el-option label="5" value="5"></el-option>
                      <el-option label="10" value="10"></el-option>
                      <el-option label="15" value="15"></el-option>
                      <el-option label="30" value="30"></el-option>
                    </el-select>
                  </el-form-item>
                   -->
                  <el-form-item label="生效时间">
                    <el-time-select
                      placeholder="起始时间"
                      v-model="ruleForm.startTime"
                      :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '23:00'
                      }" :disabled="isView">
                    </el-time-select>
                    <el-time-select
                      placeholder="结束时间"
                      v-model="ruleForm.endTime"
                      :picker-options="{
                        start: '00:59',
                        step: '01:00',
                        end: '23:59',
                        minTime: ruleForm.startTime
                      }" :disabled="isView">
                    </el-time-select>
                  </el-form-item>
                </div>
              </div>
              <!-- 
              <div style="border: 1px solid #f0f0f0;border-radius: 0px;width:40%;margin-left:10px;padding: 20px;position: relative;float:left;">
                <div class="chartMain">
                  <div class="monChart" id="monChart"></div>
                </div>
              </div>
               -->
              <div style="clear:both"></div>
            <div class="aar-gap">
              <div class="aar-gap-index">3</div>
              <div class="aar-gap-title ng-binding">通知方式</div>
              <div class="aar-gap-line-c">
                <div class="aar-gap-line"></div>
              </div>
            </div>
            <div style="border: 1px solid #f0f0f0;border-radius: 0px;width:50%;margin-left:60px;padding: 20px;position: relative;">
            <el-form-item label="通知对象" prop="transfer">
                <el-transfer 
                  filterable
                 :footer-format="{
                    noChecked: '共${total}项',
                    hasChecked: '已选${checked}/${total} 项'
                  }"
                 :titles="['联系人通知组', '已选联系组']"  
                 v-model="ruleForm.contactsGroupIds" 
                 :data="contactsGroupList" > 
                </el-transfer>
            </el-form-item>
            <!-- 
            <el-form-item label="邮件备注" prop="description" style="width:700px;">
              <el-input type="textarea"></el-input>
            </el-form-item>
             -->
          </div>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="creatSubmit('ruleForm')" :disabled="isView">确 定</el-button>
                </span>
      </el-dialog>

      <el-dialog title="告警详情" :visible.sync="detailV" class="customDialog team" :lock-scroll="false">
        {{detail}}
      </el-dialog>

      <el-dialog title="告警联系人" :visible.sync="contactsGroupDialogVislble" class="customDialog team" :lock-scroll="false">

        <div v-for="item in viewContactsGroupList" :key="item.id" class="scoreContainer tagCategory">
          {{item.name}}
          <el-table :data="item.contactsList"  border style="width: 100%">
            <el-table-column prop="name" label="联系人" > </el-table-column>
            <el-table-column prop="mobile" label="短信" > </el-table-column>
            <el-table-column prop="email" label="邮箱" > </el-table-column>
          </el-table>
          <br>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="contactsGroupDialogVislble = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getAlarmRuleList, getAlarmContactsGroupList, getAlarmContactsGroupListByIds, modifyRule, deleteAlarmRuleById, deleteAlarmRuleByIds, disabledRuleByIds, enabledRuleByIds } from '@/api/alarmRulesData'
import { getAllInstanceTypeList } from '@/api/instanceTypeData'
import { getGroup } from '@/api/appGroupData'
import { queryMyTags } from '@/api/instanceData'
import echarts from 'echarts'
export default {
  data() {
    const generateAlarmContactsGroupList = _ => {
      const data = []
      /*  获取联系人组数据 */
      getAlarmContactsGroupList().then(response => {
        if (response.data.code === 0) {
          response.data.data.forEach(function(element) {
            data.push({
              key: element.id,
              label: element.name
            })
          }, this)
        }
      })
      return data
    }
    return {
      isView: false,
      dataArr: null,
      monitorTitle: '',
      dataAddress: [],
      listLoading: true,
      isNotPermission: '',
      advancedSettings: false,
      pdisabled: true,
      creatDialogVislble: false,
      contactsGroupDialogVislble: false,
      currentSetting: '',
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      hightsetting: false,
      hasError: false,
      selected: '',
      searchStr: '',
      multipleSelection: [],
      listStatus: '状态(全部)',
      instanceTypeList: [],
      viewContactsGroupList: [],
      contactsGroupList: generateAlarmContactsGroupList(),
      isEdit: false,
      myAppGroupId: 0,
      myAppGroupName: '',
      myTagList: [],
      instanceAllList: [],
      instanceList: [],
      detail: '',
      detailV: false,
      ruleForm: {
        oldId: 0,
        instanceType: '',
        instanceTypeObj: {},
        resourceType: '2',
        resourceId: '',
        ruleList: [],
        monitorItemList: [],
        channelSilenceTime: '1440',
        consecutiveTimes: '1',
        startTime: '',
        endTime: '',
        contactsGroupIds: []
      },
      rules: {
      }
    }
  },
  created() {
    this.siteconfList(1)
    this.getGroupOjb()
    this.getMyTagList()
  },
  methods: {
    siteconfList(curr) {
      this.listLoading = true
      /*  if (size === undefined) {
        size = 10
      } */
      var listQuery = { currPage: curr, searchStr: this.searchStr, pageSize: this.pagesz }
      getAlarmRuleList(listQuery).then(response => {
        console.log(response.data)
        this.dataArr = response.data.data
        this.listLoading = false
        this.totalSize = response.data.totalRows
        this.currentPage = curr
        //  this.pagesz = size
        if (this.dataArr.length) {
          this.dataArr.forEach(function(element) {
            if (element.status === 1) {
              element.statusName = '正常状态'
            } else if (element.status === 2) {
              element.statusName = '告警状态'
            } else if (element.status === 3) {
              element.statusName = '数据不足'
            } else if (element.status === 4) {
              element.statusName = '启用'
            } else if (element.status === 5) {
              element.statusName = '禁止'
            } else {
              element.statusName = '未知'
            }
          }, this)
        }
      })
    },
    showAlarm(index, data) {
      this.detailV = true
      this.detail = data[index].business
    },
    showMonitorContactsGroup(index, data) {
      var params = { ids: data[index].contactsGroupIds }
      getAlarmContactsGroupListByIds(params).then(response => {
        if (response.data.code === 0) {
          this.viewContactsGroupList = response.data.data
        }
      })
      this.contactsGroupDialogVislble = true
    },
    showMonitor(index, data, isView) {
      //  this.monChart()
      if (isView !== undefined) {
        this.isView = true
        const temp = []
        getAlarmContactsGroupList().then(response => {
          if (response.data.code === 0) {
            response.data.data.forEach(function(element) {
              temp.push({
                key: element.id,
                label: element.name,
                disabled: true
              })
            }, this)
          }
        })
        this.contactsGroupList = temp
      } else {
        this.isView = false
        const temp = []
        getAlarmContactsGroupList().then(response => {
          if (response.data.code === 0) {
            response.data.data.forEach(function(element) {
              temp.push({
                key: element.id,
                label: element.name
              })
            }, this)
          }
        })
        this.contactsGroupList = temp
      }
      /*  获取所有产品列表  */
      getAllInstanceTypeList().then(response => {
        this.isEdit = false
        this.instanceTypeList = []
        const instanceTypeListData = response.data
        if (instanceTypeListData.code === 0) {
          instanceTypeListData.data.forEach(function(element) {
            this.instanceTypeList.push(element)
          }, this)
          if (data !== undefined) {
            this.isEdit = true
            this.monitorTitle = '修改告警规则'
            let instanceTypeObjTemp = {}
            instanceTypeListData.data.forEach(function(element) {
              if (data[index].instanceTypeId === element.id) {
                instanceTypeObjTemp = element
              }
            }, this)
            this.ruleForm = {
              oldId: data[index].id,
              instanceType: data[index].instanceTypeId,
              instanceTypeObj: instanceTypeObjTemp,
              resourceType: data[index].resourceType,
              resourceId: data[index].resourceId + '',
              ruleList: [
                {
                  id: data[index].id,
                  name: data[index].name,
                  monitorItemId: data[index].monitorItemId,
                  timeRange: data[index].timeRange,
                  business: data[index].business,
                  metric: data[index].metric,
                  relation: data[index].relation,
                  values: data[index].values
                }
              ],
              monitorItemList: [],
              channelSilenceTime: data[index].channelSilenceTime,
              consecutiveTimes: data[index].consecutiveTimes,
              startTime: data[index].startTime,
              endTime: data[index].endTime,
              contactsGroupIds: data[index].contactsGroupIdList,
              id: data[index].id
            }
            this.instanceList = []
            this.instanceAllList.forEach(function(element) {
              if (data[index].instanceTypeId === element.typeId) {
                this.instanceList.push(element)
              }
            }, this)
            console.log(this.ruleForm, 'this.ruleForm')
          } else {
            this.monitorTitle = '创建告警规则'
            let resourceId = ''
            if (this.myTagList.length > 0) {
              resourceId = this.myTagList[0].id
            }
            this.ruleForm = {
              oldId: 0,
              instanceType: this.instanceTypeList[0].id,
              instanceTypeObj: this.instanceTypeList[0],
              resourceType: '2',
              resourceId: resourceId,
              ruleList: [
                {
                  name: '',
                  monitorItemId: this.instanceTypeList[0].monitorItemList[0].id,
                  timeRange: '1',
                  business: '订单',
                  metric: 'exist',
                  relation: '>',
                  values: ''
                }
              ],
              monitorItemList: this.instanceTypeList[0].monitorItemList,
              channelSilenceTime: '1440',
              consecutiveTimes: '1',
              startTime: '00:00',
              endTime: '23:59',
              contactsGroupIds: []
            }
            this.instanceList = []
            this.instanceAllList.forEach(function(element) {
              if (this.instanceTypeList[0].id === element.typeId) {
                this.instanceList.push(element)
              }
            }, this)
          }
        }
      })
      this.creatDialogVislble = true
    },
    monChart() {
      const product = echarts.init(document.getElementById('monChart'))
      product.clear()
      const option = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      product.setOption(option)
    },
    creatSubmit(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认保存告警规则？', '提示', {
            type: 'warning'
          })
          .then(_ => {
            var formParams = { formParams: JSON.stringify(this.ruleForm) }
            modifyRule(formParams).then(response => {
              if (response.data.code === 0) {
                _this.creatDialogVislble = false
                _this.siteconfList(1)
                _this.$message({
                  message: '操作成功!',
                  type: 'success'
                })
              }
            })
          })
          .catch(_ => {})
          console.log(this.ruleForm, 'ruleForm')
        }
      })
    },
    filterTag(value, row) {
      console.log(value)
      if (value === 0) {
        this.listStatus = '状态(全部)'
      } else if (value === 1) {
        this.listStatus = '状态(正常状态)'
      } else if (value === 2) {
        this.listStatus = '状态(告警状态)'
      } else if (value === 3) {
        this.listStatus = '状态(数据不足)'
      } else if (value === 4) {
        this.listStatus = '状态(启用)'
      } else if (value === 5) {
        this.listStatus = '状态(禁用)'
      }
      if (value === 0) {
        return true
      } else {
        return row.status === value
      }
    },
    sethigh() {
      this.hightsetting = true
    },
    handleSizeChange(val) {
      this.pagesz = val
      this.siteconfList(1)
    },
    handleCurrentChange(val) {
      this.siteconfList(val)
    },
    resourceTypeChange(val) {
      if (val === '2') {
        if (this.myTagList.length > 0) {
          this.ruleForm.resourceId = this.myTagList[0].id
        } else {
          this.ruleForm.resourceId = ''
        }
      } else {
        this.instanceList = []
        this.instanceAllList.forEach(function(element) {
          if (this.ruleForm.instanceType === element.typeId) {
            this.instanceList.push(element)
          }
        }, this)
        this.ruleForm.resourceId = ''
        if (this.instanceList.length > 0) {
          this.ruleForm.resourceId = this.instanceList[0].id
        }
      }
    },
    deleteAlarmRUle(index, data) {
      this.$confirm('确认删除告警规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        const ruleId = data[index].id
        deleteAlarmRuleById(ruleId).then(response => {
          if (response.data.code === 0) {
            this.siteconfList(1)
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    delAll() {
      this.$confirm('确认删除告警规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        const idQuery = []
        this.multipleSelection.forEach(function(element) {
          idQuery.push(element.id)
        }, this)
        const obj = {
          ids: idQuery.join(',')
        }
        deleteAlarmRuleByIds(obj).then(response => {
          if (response.data.code === 0) {
            this.siteconfList(1)
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    enabledAll() {
      this.$confirm('确认开启告警规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        const idQuery = []
        this.multipleSelection.forEach(function(element) {
          idQuery.push(element.id)
        }, this)
        const obj = {
          ids: idQuery.join(',')
        }
        enabledRuleByIds(obj).then(response => {
          if (response.data.code === 0) {
            this.siteconfList(1)
            this.$message({
              message: '开启成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    disabledAll() {
      this.$confirm('确认禁用告警规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        const idQuery = []
        this.multipleSelection.forEach(function(element) {
          idQuery.push(element.id)
        }, this)
        const obj = {
          ids: idQuery.join(',')
        }
        disabledRuleByIds(obj).then(response => {
          if (response.data.code === 0) {
            this.siteconfList(1)
            this.$message({
              message: '禁用成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    },
    addRuleData() {
      const obj = {}
      obj.id = 0
      obj.name = ''
      obj.timeRange = '1'
      obj.business = '订单'
      obj.metric = 'exist'
      obj.relation = '>'
      obj.values = ''
      obj.monitorItemId = this.ruleForm.instanceTypeObj.monitorItemList[0].id
      this.ruleForm.ruleList.push(obj)
    },
    deleteRuleData(index) {
      this.ruleForm.ruleList.splice(index, 1)
    },
    getGroupOjb() {
      getGroup().then(response => {
        this.myAppGroupId = response.data.group.id
        this.myAppGroupName = response.data.group.name
        if (response.data.group.instances.length > 0) {
          this.instanceAllList = response.data.group.instances
        }
      })
    },
    getMyTagList() {
      queryMyTags().then(response => {
        this.myTagList = []
        if (response.data.code === 0) {
          this.myTagList = response.data.rows
          const arr = []
          for (var i in response.data.rows) {
            arr.push({ id: '' + response.data.rows[i].id, name: response.data.rows[i].name })
          }
          this.myTagList = arr
        }
      })
    },
    instanceTypeChange(val) {
      if (!this.isEdit) {
        this.instanceTypeList.forEach(function(element) {
          if (element.id === val) {
            this.ruleForm.instanceTypeObj = element
          }
        }, this)
        this.ruleForm.ruleList = []
        if (this.ruleForm.instanceTypeObj.monitorItemList.length > 0) {
          const obj = {}
          obj.id = 0
          obj.name = ''
          obj.timeRange = '1'
          obj.business = '订单'
          obj.metric = 'exist'
          obj.relation = '>'
          obj.values = ''
          obj.monitorItemId = this.ruleForm.instanceTypeObj.monitorItemList[0].id
          this.ruleForm.ruleList.push(obj)
        }
      }
      //  设置该类型的实例
      if (this.ruleForm.resourceType === '3') {
        this.instanceList = []
        this.instanceAllList.forEach(function(element) {
          if (val === element.typeId) {
            this.instanceList.push(element)
          }
        }, this)
        this.ruleForm.resourceId = ''
        if (this.instanceList.length > 0) {
          this.ruleForm.resourceId = this.instanceList[0].id
        }
      }
      console.log(this.isEdit, '-----')
    }
  }
}

</script>
<style lang="scss">
.detail-header {
  padding: 0 15px;
  margin-bottom: 10px;
  overflow: hidden;
  .console-title {
    padding: 16px 0px;
    min-height: 70px;
    border-bottom: 1px solid #eee;
    position: relative;
    h5 {
      display: inline-block;
      text-indent: 8px;
      border-left: 2px solid #88B7E0;
      margin: 8px 0;
      margin-right: 8px;
      vertical-align: top;
    }
    .stayRight {
      position: absolute;
      top: 15px;
      right: 0;
      overflow: hidden;
      .refresh {
        float: left;
        margin-right: 10px;
        color: #333;
        border: 1px solid #ddd;
        background-color: #F7F7F7;
      }
      .creatSite {
        float: left;
      }
    }
  }
}

.searchSel {
  width: 150px;
  display: inline-block;
}

.searchIpt {
  width: 350px;
  display: inline-block;
}

.searchbtn {
  width: 100px;
  display: inline-block;
}

.searchBar {
  padding: 0 10px;
}

.tableMain {
  padding: 10px;
}

.typeform {
  display: inline;
  .form-control {
    border: none;
    padding: 0;
    box-shadow: none;
    display: inline;
    height: 30px;
    width: 60%;
  }
}

.spantype {
  display: inline;
}

.pageSIzeblock {
  overflow: hidden;
  padding: 10px 0;
  .pullright {
    float: right;
  }
}

.statusError {
  color: red;
}

.aar-gap-line {
  height: 0;
  border-bottom: 1px dotted #888888;
  display: inline-block;
  width: 100%;
}

.aar-gap-index {
  background: #0099cc;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}

.aar-gap {
  position: relative;
  height: 50px;
}

.aar-gap-title {
  margin-left: 15px;
  font-weight: bold;
  font-size: 13px;
  position: absolute;
  left: 40px;
  top: 12px;
  background: #fff;
  padding-right: 8px;
}

.aar-gap-line-c {
  height: 40px;
  margin: 0 50px 0 120px;
  line-height: 38px
}

.valuesClass {
  width: 100px;
}


.btn-link {
  color: #06C;
  text-shadow: none;
  border: none;
  margin-left: 80px;
}

.btn-link:hover {
  color: #039
}

.delete-link {
  color: red;
  text-shadow: none;
  border: none;
  margin-left: 10px;
}

.delete-link:hover {
  color: red;
}

.instanceTypeClass .el-select {
  width: 500px;
}

.chartMain{
  overflow: hidden;
  width: 100%;
  .monChart{
    width: 1100px;
    height: 300px;
  }
}

</style>
